<!--
 * @Author: FengTeng
 * @Date: 2021-02-20 11:18:59
 * @LastEditTime: 2021-03-03 19:26:08
 * @LastEditors: FengTeng
 * @Description: Description
 * @FilePath: \spa-manage\src\views\system-manage\SystemManage.vue
-->
<template>
  <div class="system-manage" v-if="userPermissions.customerPool.lookSearch">
    <el-tree :data="treeData" node-key="id" default-expand-all :expand-on-click-node="false">
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <span v-if="data.prop === 'systemUser' || data.prop === 'label'">{{ node.label }}</span>
        <el-button v-else type="text" size="medium" @click="handleCreateUser(data)">{{ node.label }}</el-button>
        <span v-if="data.prop === 'systemUser'" style="margin-left: 5px;">
          <el-button type="text" size="medium" @click="handleEditUser(data)">
            编辑
          </el-button>
        </span>
      </span>
    </el-tree>
    <system-user-detail ref="systemUserDetailRef" :modalConfig="systemUserDetailConfig"></system-user-detail>
  </div>
</template>

<script>
import $ from "jquery";
import apis from "@/apis/index.js";
import SystemUserDetail from "@/components/modal/system-user-detail/SystemUserDetail.vue";
import { mapState } from "vuex";
export default {
  name: "SystemManage",
  components: {
    SystemUserDetail
  },
  data() {
    return {
      treeData: [
        {
          prop: "label",
          label: "销售",
          children: [
            {
              prop: "addSaleManage",
              label: "+ 新增销售经理",
              children: []
            },
            {
              prop: "addSale",
              label: "+ 新增销售",
              children: []
            }
          ]
        },
        {
          prop: "label",
          label: "商品负责人",
          children: [
            {
              prop: "addDirector",
              label: "+ 新增负责人",
              children: []
            }
          ]
        }
      ],
      systemUserDetailConfig: {
        visible: false,
        CloseOnClickModal: false, // 是否允许点击遮罩层关闭弹窗
        showClose: true // 是否显示右上角关闭按钮
      }
    };
  },
  computed: {
    ...mapState({
      userPermissions: state => state.permissionModule.permissions
    })
  },
  created() {
    this.requestSystemUser();
  },
  methods: {
    handleCreateUser(event) {
      console.log(event);
      this.$refs.systemUserDetailRef.openModal(event);
    },
    handleEditUser(event) {
      console.log(event);
      this.$refs.systemUserDetailRef.openModal(event);
    },
    requestSystemUser() {
      $.post(
        apis.getSystemUser,
        {
          type: "select"
        },
        resp => {
          resp = JSON.parse(resp);
          if (resp.code === "ok") {
            this.setSystemUser(resp.data);
          } else {
            this.$message.error(resp.msg);
          }
        }
      );
    },
    setSystemUser(data) {
      data.forEach(item => {
        item["prop"] = "systemUser";
        item["label"] = item.name;
        switch (Number(item.zhiwei_id)) {
          case 1:
            break;
          case 2:
            this.treeData[0].children[0].children.push(item);
            break;
          case 3:
            this.treeData[0].children[1].children.push(item);
            break;
          case 4:
            this.treeData[1].children[0].children.push(item);
            break;
          default:
            break;
        }
      });
    }
  }
};
</script>

<style lang="scss" src="./index.scss"></style>
